<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>前端定位模块</title>
   <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <style>
       * {
           margin: 0;
           padding: 0;
           border: 0;
       }
       body {
            padding-top: 20px;
           position: absolute;
           width: 100%;
           height: 100%;
           text-align: center;
       }
       .bg-gradient{

          height: 35px;
          top: 0;
          left: 0!important;
          width: 100%;
          position: fixed;
          z-index: 100;
          color: #fff;
        margin-top: 40px;
          /*background: #1b1b1b;*/
       }
       .bg-gradient .qx{
        float: left;
        width: 40px;
        padding: 5px;
        margin: 40px 0 0 10px;
        /* background-color: #00FF00; */
       }
        .bg-gradient .fs{
        float: right;
        width: 40px;
        padding: 5px;
        margin: 40px 10px 0 0;
        background-color: #00FF00;
       }
   </style>
   <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
</head>
<body>

  <div class="bg-gradient" id="dht">
      <div class="qx" onclick="api.closeWin();" tapmode>取消</div>
      <div class="fs" tapmode>发送</div>
   </div>

   <iframe id="mapPage" width="100%" height="100%" frameborder=0
    src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=MADBZ-WR53D-V6Y4M-P4RFT-5Z6S6-ZYFER&referer=myapp">

</iframe>
   <script type="text/javascript" src="js/jquery.js"></script>

   <script type="text/JavaScript">



      window.addEventListener('message', function(event) {
        // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
        var loc = event.data;
        var name=loc.cityname;
        if(name.length>0){
      $(document).ready(function(){
        $('#ditu').hide();

        $('#contain1').show();
              var str="";
               str='<div class="info-list-cell b-b"  id="xuanzhe" οnclick="Show1();" style="border-bottom:none;line-height: 25px; width: 95%;top: 18%;"> <img style="height:17px;width:19px;margin-left:-3px;" src="WAP_IMG/stact/picture/dizhi.png"/><text class="cell-tit"  >所在地区</text><text class="cell-tip" id="diqu" >'+name+'</text><text class="cell-more"></text></div>';     
               $('#xuanzhe').html(str);

             });

        }
        else{
          href='';
        }
     
    });

   </script>
</body>
</html>
